<template>
  <div id="tableData">
    <el-table :data="Model">
      <el-table-column label="日期"
                       width="240">
        <template slot-scope="scope">
          <span>{{ scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容"
                       width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.content}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户"
                       width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.user}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期"
                       width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime.$date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="240">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    Model: Array
  },
  data: function () {
    return {
      modifyData: {}
    }
  },
  methods: {
    // 点击编辑按钮触发事件
    handleEdit: function (row) {
      // console.log('测试：', row._id)
      this.modifyData.user = row.user
      this.modifyData.content = row.content
      this.modifyData.date = row.date
      this.modifyData.summary = row.summary
      this.$emit('edit', this.modifyData)
      this.$store.dispatch('list/modifyIdData', row._id.$oid)
    },
    // 点击删除按钮出发事件
    handleDelete: function (row) {
      this.$emit('delete', row._id.$oid)
    }
  }
}
</script>

